<template>
  <div id="app">
    <div id="building"></div>

    <!-- <v-header @showSide="show"></v-header>
    <sidebar ref="sidebar"></sidebar>
    <router-view></router-view>-->
    <!-- 
    <login></login>-->
    <div class="router">
      <!-- <router-link to="/date" tag="button" replace>数据</router-link>
      <router-link to="/home" tag="button" replace>主页</router-link>-->
      <!-- 通过代码的方式修改路由 -->
      <button @click="dataClick">数据</button>
      <button @click="homeClick">首页</button>
      <!-- <router-link :to="'/users/'+usersId" tag="button" replace>用户</router-link> -->
      <button @click="usersClick">用户</button>
      <!-- 使用query方式向路由传递数据，地址栏中的形式如下http://localhost:9012/profile?height=1.88&age=18&name=jack -->
      <!-- <router-link
        :to="{path:'/profile',query:{height:'1.88',age:'18',name:'jack'}}"
        tag="button"
      >档案</router-link>-->
      <button @click="profileClick">档案</button>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Login from "./components/login";
export default {
  name: "app",
  methods: {
    // //显示侧边栏，在其显示时访问他的获取数据方法，从而使better-scroll能够计算出中间主题列表高度
    // show() {
    //   this.$refs.sidebar.open();
    // },
    dataClick() {
      this.$router.replace("/data");
      console.log("dataClick");
    },
    usersClick() {
      // 函数方法动态绑定用户id
      this.$router.replace("/users/" + this.usersId);
      console.log("usersClick");
    },
    homeClick() {
      this.$router.replace("/home");
      console.log("homeClick");
    },
    // 使用函数方法传入数据
    profileClick() {
      this.$router.replace({
        path: "/profile",
        query: {
          name: "kobe",
          age: 18,
          height: 1.88,
        },
      });
      console.log("profileClick");
    },
  },
  components: {
    Login,
  },
  data() {
    return {
      title: "知乎",
      usersId: "lisa",
    };
  },
};
</script>

<style lang="scss" scoped>
#building {
  background: url("./assets/background.png");
  width: 100%; //大小设置为100%
  height: 100%; //大小设置为100%
  position: fixed;
  background-size: 100% 100%;
}
.router {
  margin: 0 auto 24px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 300px;
  width: 300px;
}
.router-link-active {
  color: brown;
}
</style>